<template>
  <view class="template-guide">
    <!-- 顶部自定义导航 -->
    <tn-nav-bar fixed alpha customBack>
      <view slot="back" class='tn-custom-nav-bar__back'
        @click="goBack">
        <text class='icon tn-icon-left'></text>
        <text class='icon tn-icon-home-capsule-fill'></text>
      </view>
    </tn-nav-bar>
    <view class="top-backgroup">
      <image src='https://tnuiimage.tnkjapp.com/swiper/fullbg3.jpg' mode='heightFix' class='backgroud-image'></image>
    </view>
    <swiper class="card-swiper" :circular="true"
      :autoplay="true" duration="500" interval="5000" @change="cardSwiper"> 
      <swiper-item v-for="(item,index) in swiperList" :key="index" :class="cardCur==index?'cur':''">
        <view class="swiper-item image-banner">
          <image :src="item.url" mode="heightFix" v-if="item.type=='image'" ></image>
        </view>
        <view class="swiper-item-text tn-text-center">       
          <view class="tn-text-bold tn-padding-top-xs" style="font-size: 54rpx;">{{item.name}}</view>
        </view>
		
		<view class="swiper-item-text tn-text-center" style="margin-top:20rpx;">
		  <view class=" tn-text-xl">主持人</view>
		  <view class="tn-padding-top-xs tn-flex tn-flex-row-center">
		<view class="tn-flex-basic-xs">			  
		<tn-avatar size="lg" src="https://img2.woyaogexing.com/2023/05/24/1d6c7bfcc20f1cd98ac10072f27c9e3b.jpg" ></tn-avatar>	  
		  </view>
		  <view class="tn-flex-basic-xs">
		<tn-avatar size="lg" src="https://img2.woyaogexing.com/2023/05/24/1d6c7bfcc20f1cd98ac10072f27c9e3b.jpg"></tn-avatar>	  
		  </view>
		<view class="tn-flex-basic-xs">
		<tn-avatar size="lg" src="https://img2.woyaogexing.com/2023/05/24/1d6c7bfcc20f1cd98ac10072f27c9e3b.jpg"></tn-avatar>	  
		  </view>
		  <view class="tn-flex-basic-xs">
		  <tn-avatar size="lg" src="https://img2.woyaogexing.com/2023/05/24/1d6c7bfcc20f1cd98ac10072f27c9e3b.jpg"></tn-avatar>	  
		    </view>
		  </view>
		</view>
		    <view class="go tn-margin-top">
		      <tn-button  shape="round" backgroundColor="#aa55ff" fontColor="#ffffff" width="60vw" height="70rpx">5月23日20:30开播  立即预约</tn-button>
		    </view>
    
      </swiper-item>
    </swiper>
    
  
    
  </view>
</template>

<script>
  import template_page_mixin from '@/libs/mixin/template_page_mixin.js'
  export default {
    name: 'TemplateGuide',
    mixins: [template_page_mixin],
    data(){
      return {
        cardCur: 0,
        swiperList: [{
          id: 0,
          type: 'image',
          name: '未脱单的我们，到底卡在哪儿',
          text: '星球聊天室',
          url: 'https://www.52tt.com/media/1092/live_element_05.png',
        }],
      }
    },
    methods: {
      // cardSwiper
      cardSwiper(e) {
        this.cardCur = e.detail.current
      },
    }
  }
</script>

<style lang="scss" scoped>

    /* 顶部背景图 start */
    .top-backgroup {
      position: fixed;
      height: 100vh;
      z-index: -1;
    
      .backgroud-image {
        width: 100%;
        height: 100vh;
        // z-index: -1;
      }
    }
  
  .card-swiper {
    height: 100vh !important;
  }
    
  .card-swiper swiper-item {
    width: 750rpx !important;
    left: 0rpx;
    box-sizing: border-box;
    overflow: initial;
  }
    
  .card-swiper swiper-item .swiper-item {
    margin-top: 20vh;
    width: 100%;
    display: block;
    height: 100vh;
    border-radius: 0rpx;
    transform: translate(100rpx, 0rpx) scale(0.8);
    transition: all 0.2s ease-in 0s;
    overflow: hidden;
    opacity: 1;
  }
    
  .card-swiper swiper-item.cur .swiper-item {
    transform: translate(100rpx, 0rpx) scale(1, 1);
    transition: all 0.2s ease-in 0s;
    opacity: 1;
  }
  
  .card-swiper swiper-item .swiper-item-text {
    margin-top: -50vh;
    width: 100%;
    // height: 100%;
    display: block;
    border-radius: 10rpx;
    transform: scale(0.7, 0.7);
    transition: all 0.4s ease 0s;
    overflow: hidden;
    opacity: 1;
  }
    
  .card-swiper swiper-item.cur .swiper-item-text {
  
    transform: scale(1);
    transition: all 0.4s ease 0s;
    opacity: 1;
  }
  
  .image-banner{
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .image-banner image{
    width: 100%;
  }
  
  /* 轮播指示点 start*/
  .indication{
    z-index: 9999;
    width: 100%;
    height: 36rpx;
    position: fixed;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
  }
  
  .spot{
    background-color: #E6E6E6;
    width: 10rpx;
    height: 10rpx;
    border-radius: 20rpx;
    margin: 0 8rpx !important;
    left: 0rpx;
    top: -180rpx;
    position: relative;
  }
  
  .spot.active{
    width: 40rpx;
    background-color: #FFA726;
  }
  .go{
    z-index: 9999;
    width: 100%;
    position: fixed;
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:center;
    bottom: 120rpx;
  }
</style>
